import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert, TouchableOpacity} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Carousel, Toast} from '@ant-design/react-native';
import {Card} from 'react-native-shadow-cards';
import {getProjectDataInfo, getBuilingShowPicList, getProjectNoticeListApi} from '~/api/project';
import {getShowImgByBuildingId} from '~/api/company';
import Suspensions from '~/pages/developer/publics/Susoension';
import {getNoticeByProjectId} from '~/api/parking';
class CommunityInfo extends Component {
    static navigationOptions = {
        title: '',
        headerTransparent: true,
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            list: [],
            httphead: '',
            title: '',
            ProjectDataID: 0,
            imglist: [],
            CompanyBuildingID: 0,
            noticelist: [],
            img: [],
        };
        console.disableYellowBox = true;
        getProjectDataInfo(this.props.navigation.getParam('params')).then((r) => {
            if (r.code === 0) {
                this.setState(
                    {
                        list: r.data,
                        lp: r.data.BuildingName,
                        ProjectDataID: r.data.ProjectDataID,
                        CompanyBuildingID: r.data.CompanyBuildingID,
                    },
                    () => {
                        this.getNotice(r.data.CompanyBuildingID);
                        this.getimg(r.data.CompanyBuildingID);
                    },
                );
                getBuilingShowPicList(r.data.CompanyBuildingID).then((r) => {
                    if (r.code === 0) {
                        this.setState({
                            imglist: r.data.LogoList,
                            httphead: r.data.HttpHead,
                        });
                    } else {
                        Toast.info(r.msg, 1);
                    }
                });
                // Alert.alert('成功');
            } else {
                Toast.info(r.msg, 1);
            }
        });
    }
    getNotice(CompanyBuildingID) {
        getProjectNoticeListApi({
            page_index: 1,
            page_size: 10,
            condidate: {
                CompanyBuildingID: CompanyBuildingID,
            },
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    noticelist: r.data.list,
                });
            }
        });
    }
    getimg(CompanyBuildingID) {
        getShowImgByBuildingId({id: CompanyBuildingID}).then((r) => {
            if (r.code === 0) {
                this.setState({
                    img: r.data,
                });
            } else {
                console.log(r.msg);
            }
        });
    }

    render() {
        return (
            <View style={{width: '100%', height: '100%', backgroundColor: 'white'}}>
                <ScrollView style={{flex: 1}}>
                    <Image
                        style={{
                            width: '100%',
                            height: 250,
                        }}
                        // source={require('~/assets/public/communityinfo.jpg')}
                        source={{uri: this.state.img.planImg}}
                    />
                    {this.state.img.ParkingPlanID > 0 && (
                        <Card style={{paddingTop: 10, paddingBottom: 10, margin: '4%', width: '92%', borderColor: '#F5F5F5'}}>
                            <Flex justify={'around'} style={{paddingLeft: 5, paddingRight: 5}}>
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('LoanInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={styles.infoimage} source={require('~/assets/community/tu1.png')} />
                                    <Text style={styles.fontinfo}>怎样零首付</Text>
                                </Flex>
                                <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GetGiftInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={styles.infoimage} source={require('~/assets/community/tu2.png')} />
                                    <Text style={styles.fontinfo}>怎样拿好礼</Text>
                                </Flex>
                                <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GetMoneyInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={styles.infoimage} source={require('~/assets/community/tu3.png')} />
                                    <Text style={styles.fontinfo}>怎样返现金</Text>
                                </Flex>
                                <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GetCarInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={styles.infoimage} source={require('~/assets/community/tu4.png')} />
                                    <Text style={styles.fontinfo}>怎样送汽车</Text>
                                </Flex>
                                <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                <Flex
                                    onPress={() => {
                                        this.props.navigation.push('GetParkInfo');
                                    }}
                                    direction={'column'}>
                                    <Image style={styles.infoimage} source={require('~/assets/community/tu5.png')} />
                                    <Text style={styles.fontinfo}>怎样得车位</Text>
                                </Flex>
                            </Flex>
                        </Card>
                    )}
                    <View
                        style={{
                            paddingBottom: 10,
                            width: '92%',
                            backgroundColor: 'white',
                            marginLeft: '4%',
                            marginRight: '4%',
                            borderRadius: 10,
                            marginBottom: 10,
                        }}>
                        <Flex style={{width: '100%'}} justify={'between'}>
                            <Text
                                style={{
                                    fontSize: 19,
                                    fontWeight: 'bold',
                                    color: '#333333',
                                    marginTop: 10,
                                }}>
                                {this.state.list.BuildingName}
                            </Text>
                            <Image style={{width: 44, height: 22, marginTop: 10}} source={require('~/assets/community/cuxiao.png')} />
                        </Flex>
                        <Text
                            style={{
                                fontSize: 12,
                                color: '#C41B13',
                                marginTop: 5,
                            }}>
                            车位售价：
                            <Text style={{color: '#C41B13', fontSize: 21}}>
                                {(this.state.list.PriceSellMin / 10000).toFixed(1)}-{(this.state.list.PriceSellMax / 10000).toFixed(1)}
                            </Text>
                            万
                        </Text>

                        {/*<CarouselMessage  viewHeight={40} data={[{content: '1111'}, {content: '2222'}, {content: '3333'}]} startNow={true} />*/}

                        {this.state.noticelist.length > 0 && (
                            <>
                                <Flex style={styles.noticeView}>
                                    <View style={styles.noticeLeft}>
                                        <Image style={styles.noticeIcon} source={require('~/assets/community/laba.png')} />
                                    </View>
                                    <View style={styles.noticeRight}>
                                        <Carousel style={styles.noticeList} autoplayInterval={4000} dots={false} vertical autoplay infinite>
                                            {this.state.noticelist.map((item, index) => (
                                                <View style={styles.laba} key={index}>
                                                    <Text
                                                        onPress={() => {
                                                            this.props.navigation.push('CarouselInfo', {
                                                                projectNoticeID: item.ProjectNoticeID,
                                                            });
                                                        }}
                                                        style={styles.noticeText}
                                                        numberOfLines={1}>
                                                        {item.NoticeContent}
                                                    </Text>
                                                </View>
                                            ))}
                                        </Carousel>
                                    </View>
                                </Flex>
                                <WhiteSpace />
                            </>
                        )}
                        {/*{this.state.noticelist.length > 0 && <Carouselcard noticelist={this.state.noticelist} type={1} />}*/}
                    </View>
                    <Card style={{padding: 10, marginLeft: '4%', marginRight: '4%', width: '92%', borderWidth: 0.5, borderColor: '#F5F5F5'}}>
                        <View style={{}}>
                            <Text style={{paddingLeft: 10, fontSize: 12, fontWeight: 'bold', color: '#444444'}}>
                                本次活动推出{this.state.list.ParkingCount}个车位
                            </Text>
                            <Flex
                                direction={'row'}
                                justify={'between'}
                                style={{
                                    marginTop: 10,
                                    backgroundColor: '#FFFFFF',
                                    paddingLeft: 10,
                                    paddingRight: 10,
                                }}>
                                <Flex direction={'column'}>
                                    <Text style={{fontSize: 22, color: '#EC4F46'}}>{this.state.list.ParkingCount7}</Text>
                                    <Text style={{fontSize: 13, color: '#666666'}}>已售车位</Text>
                                </Flex>
                                <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                <Flex direction={'column'}>
                                    <Text style={{fontSize: 22, color: '#22CF8F'}}>{this.state.list.ParkingCount1}</Text>
                                    <Text style={{fontSize: 13, color: '#666666'}}>未售车位</Text>
                                </Flex>
                                <View style={{borderRightWidth: 0.3, width: 1, height: 55, borderColor: '#d3d3d3'}} />
                                <Flex direction={'column'}>
                                    <Text style={{fontSize: 22, color: '#1CA2FF'}}>{this.state.list.ParkingCount5}</Text>
                                    <Text style={{fontSize: 13, color: '#666666'}}>已定车位</Text>
                                </Flex>
                            </Flex>
                        </View>
                    </Card>
                    <View
                        style={{
                            paddingBottom: 10,
                            width: '92%',
                            backgroundColor: 'white',
                            marginLeft: '4%',
                            marginRight: '4%',
                            borderRadius: 10,
                            marginTop: '2%',
                            marginBottom: '2%',
                        }}>
                        <Flex
                            style={{
                                paddingTop: 10,
                            }}
                            direction="column">
                            <Flex style={styles.flflex}>
                                <Text style={styles.flname}>开发商</Text>
                                <Text numberOfLines={1} style={styles.flinfo}>
                                    {this.state.list.CompanyName}
                                </Text>
                            </Flex>
                            {this.state.img.ParkingPlanID > 0 && (
                                <Flex style={styles.flflex}>
                                    <Text style={styles.flname}>活动名称</Text>
                                    <Text numberOfLines={1} style={styles.flinfo}>
                                        {this.state.list.ProjectName}
                                    </Text>
                                </Flex>
                            )}
                            <Flex style={styles.flflex} wrap={'wrap'}>
                                <Text style={styles.flname}>地址</Text>
                                <Text style={styles.flinfo}>
                                    {/*<Image*/}
                                    {/*    style={{*/}
                                    {/*        width: 12,*/}
                                    {/*        height: 12,*/}
                                    {/*    }}*/}
                                    {/*    source={require('~/assets/shouye/dizhi.png')}*/}
                                    {/*/>*/}
                                    {this.state.list.CityName} {this.state.list.Address}
                                </Text>
                            </Flex>
                            <Flex style={styles.flflex}>
                                <Text style={styles.flname}>总户数</Text>
                                <Text style={styles.flinfo}>{this.state.list.HouseCount}</Text>
                            </Flex>
                            <Flex style={styles.flflex}>
                                <Text style={styles.flname}>容积率</Text>
                                <Text style={styles.flinfo}>{this.state.list.AreaRate}</Text>
                            </Flex>
                            <Flex style={styles.flflex}>
                                <Text style={styles.flname}>车位总数</Text>
                                <Text style={{width: '80%', color: '#666666'}}>{this.state.list.ParkingCount}</Text>
                                {/*<View style={{width: '60%'}}>*/}
                                {/*    <Text style={{color: '#ec4f46', backgroundColor: '#FDEDEC', alignSelf: 'flex-start', padding: 2, borderRadius: 5}}>*/}
                                {/*        {this.state.list.BuildingState == 0 ? '未知' : this.state.list.BuildingState == 1 ? '纯住宅' : this.state.list.BuildingState == 2 ? '商业' : '商住一体'}*/}
                                {/*    </Text>*/}
                                {/*</View>*/}
                            </Flex>
                            <Flex style={styles.flflex}>
                                <Text style={styles.flname}>车位配比</Text>
                                <Text style={styles.flinfo}>1:{this.state.list.ParkingRate}</Text>
                            </Flex>
                        </Flex>
                        {this.state.list.BuyKind == 1 ? (
                            <View
                                style={{
                                    width: '100%',
                                    height: 20,
                                    marginTop: 10,
                                }}>
                                <Text
                                    style={{
                                        color: '#EC4F46',
                                    }}>
                                    注：只能本小区人员购买
                                </Text>
                            </View>
                        ) : null}
                    </View>
                </ScrollView>
                <Suspensions navigation={this.props.navigation} />
                <Button
                    style={{height: 45, width: '92%', marginLeft: '4%', marginRight: '4%', borderRadius: 5}}
                    type={'warning'}
                    onPress={() => {
                        this.props.navigation.push('CommunityDetails', {
                            params: this.state.ProjectDataID,
                            buy: this.state.list.BuyKind === 1 ? this.state.CompanyBuildingID : 0,
                            companyid: this.state.CompanyBuildingID,
                        });
                    }}>
                    了解车位详情
                </Button>
            </View>
        );
    }
}

export default CommunityInfo;
const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: '#fff',
    },
    imagessuccess: {
        width: '100%',
        height: 250,
    },
    infoimage: {
        width: 35,
        height: 35,
    },
    fontinfo: {color: '#666666', fontSize: 10, paddingTop: 5},
    containerHorizontal: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    containerVertical: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
    images: {
        width: '100%',
        height: 150,
        marginTop: 10,
    },
    images2: {
        width: '100%',
        height: 50,
        marginTop: 10,
    },
    flflex: {
        marginTop: 10,
    },
    flname: {
        width: '20%',
        color: '#999999',
        fontSize: 12,
    },
    flinfo: {
        width: '80%',
        color: '#555555',
        fontSize: 12,
    },
    explain: {
        width: '100%',
        height: 40,
        backgroundColor: '#FDEDEC',
        borderRadius: 10,
    },
    explaintext: {
        color: '#EC4F46',
        fontSize: 18,
        fontWeight: 'bold',
    },
    noticeView: {
        height: 30,
        backgroundColor: '#FDEDEC',
        borderRadius: 15,
        flexDirection: 'row',
    },
    noticeLeft: {
        marginLeft: 10,
    },
    noticeIcon: {
        width: 26,
        height: 18,
    },
    noticeRight: {
        marginLeft: 10,
        flexGrow: 1,
    },
    noticeList: {
        width: '100%',
        height: 30,
    },
    noticeText: {
        height: '100%',
        fontSize: 11,
        lineHeight: 30,
    },
});
